<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: inline-block;
        background-color: white;
        min-height: 50px;
        min-width: 50px;
        padding: 20px;
        border: 1px solid black;
       
    }

    .box:active {
        background-color: rgba(165, 42, 42, 0.2);
    }
</style>

<body>
    <div id="app">

        <!-- 事件冒泡 -->
        <div class="box" @click="printName('=>A')">
            A
            <div class="box" @click="printName('==>B')">
                B
                <div class="box" @click.stop="printName('===>C')">
                    C
                    <div class="box" @click="printName('====>D')">
                        D
                        <div class="box" @click="printName('=====>E')">
                            E

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <hr>
        <!-- 事件捕获 -->
        <div class="box" @click.capture="printName1('=>A')">
            A
            <div class="box" @click.capture.stop="printName1('==>B')">
                B
                <div class="box" @click.capture="printName1('===>C')">
                    C
                    <div class="box" @click.capture="printName1('====>D')">
                        D
                        <div class="box" @click.capture="printName1('=====>E')">
                            E
        
                        </div>
                    </div>
                </div>
        
            </div>
        </div>
        <hr>
        <!-- 混合事件 -->
        <div class="box" @click.capture="printName1('=>A')">
            A
            <div class="box" @click="printName1('==>B')">
                B
                <div class="box" @click.stop="printName1('===>C')">
                    C
                    <div class="box" @click="printName1('====>D')">
                        D
                        <div class="box" @click="printName1('=====>E')">
                            E
        
                        </div>
                    </div>
                </div>
        
            </div>
        </div>
        <hr>
        <!-- 事件穿透 -->

        <div class="box" @click="printName1('=>A')">
            A
            <div class="box" @click="showTip('==>B',$event)">
                B
                <div class="box" @click="printName1('===>C')">
                    C
                    
                </div>
        
            </div>
        </div>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {

                }
            },
            methods:{
                printName(name){
                    console.log(name);
                    
                },
               
                
                printName1(name){
                    console.log(name);
                    
                },
                showTip(name,event){
                //   console.log(event);
                // console.log(name);
                if(event.target==event.currentTarget){
                    console.log(name);
                    
                }
                
                  
                  
                    
                    
                }
            }
        }).mount("#app");
    </script>
</body>

</html>